---
title: Tree
description: A tree represents a hierarchical list of items that might have child items that can be expanded, collapsed, or selected.
docType: Demo
docGroup: Components
group: Navigation
alias: [Folders]
hooks: [useTree]
components: [Tree, TreeItem, DefaultTreeItemRenderer]
---

# Tree

A tree represents a hierarchical list of items that might have child items that
can be expanded, collapsed, or selected.

## Single Select Tree

A tree can be created by using the `Tree` component, the `useTree` hook to
control the state, and a set of `data`. The `data` must follow the following
type:

```ts
interface TreeItemNode {
  itemId: string;
  parentId: string | null;
}

type TreeData = Record<string, TreeItemNode>;
```

The following example will show how to create a single-select tree.

```demo source="./SingleSelectTreeExample.tsx"

```

### Multiselect Tree

Multiple items within the tree can be selectable by enabling the `multiSelect`
option on the `useTree` hook.

```demo source="./MultiSelectTreeExample.tsx"

```

## Customizations

### Expansion Mode

When an expandable tree item is clicked, the default behavior is to select it
and toggle the expansion of child items. An alternative approach would be to
only toggle the expansion of child items by clicking on an icon and toggle the
selection by clicking anywhere else in the tree item. To enable this behavior,
set the `expansionMode` prop to `"manual"` instead of `"auto"` (default).

```demo source="./ExpansionModeExample.tsx"

```

### Expander Icon

The `TreeItem` component will use the
[expander](/customization/icon-config#expander) icon from the `ICON_CONFIG` by
default but can be overridden by setting the `expanderIcon` prop on the `Tree`
component.

> !Info! Check out the [icon rotator custom rotation](/components/icon-rotator#custom-rotation)
> example to change the rotation while collapsed and expanded.

```demo source="./ExpanderIconExample.tsx"

```

### Expander Icon Position

The expander icon defaults to rendering at the right of each `TreeItem` but can
be set to the left by enabling the `expanderLeft` prop.

```demo source="./ExpanderIconPositionExample.tsx"

```

### Decreasing Spacing

The `padding-left` for each tree item increases the deeper within the tree it
is rendered by using:

```scss
--rmd-tree-item-padding: calc(
  var(--rmd-tree-depth) * var(--rmd-tree-item-padding-incrementor) + var(--rmd-tree-item-padding-base)
);

padding-left: var(--rmd-tree-item-padding):
```

This means the padding can be configured globally by overriding
[$SASSDOC](tree-item-padding-incrementor) and
[$SASSDOC](tree-item-padding-base) or setting the custom properties using
[$SASSDOC](tree-set-var) mixin. The example below will showcase using the
mixin.

```demo source="./DecreasingSpacingExample.tsx"

```

## Custom Tree Item Renderer

```demo source="./CustomTreeItemRendererExample.tsx"

```
